﻿@page "/content/typography"

<Pager Title="Typography" Indicates="@(new[]{"Headings","Display headings","Lead","Blockquotes","List inline"})">
		<Demo Title="Headings">
		<Description>
			All HTML headings, &lt;h1> through &lt;h6>, are available.
		</Description>
		<Run>
			<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>
		</Run>
		<Code>
			@MD.Write(@"
```html
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>
```
			")
		</Code>
	</Demo>
		<Demo Title="">
		<Description>
			Use <code>Css.Class.Head(HeadSize.H1)</code> through <code>HeadSize.H6</code> in <code>CssClass</code> .h1 through .h6 classes are also available, for when you want to match the font styling of a heading but cannot use the associated HTML element.
		</Description>
		<Run>
			<Paragraph CssClass="Css.Class.Head(HeadSize.H1)">h1. Bootstrap headin</Paragraph>
			<Paragraph CssClass="Css.Class.Head(HeadSize.H2)">h2. Bootstrap headin</Paragraph>
			<Paragraph CssClass="Css.Class.Head(HeadSize.H3)">h3. Bootstrap headin</Paragraph>
			<Paragraph CssClass="Css.Class.Head(HeadSize.H4)">h4. Bootstrap headin</Paragraph>
			<Paragraph CssClass="Css.Class.Head(HeadSize.H5)">h5. Bootstrap headin</Paragraph>
			<Paragraph CssClass="Css.Class.Head(HeadSize.H6)">h6. Bootstrap headin</Paragraph>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Paragraph CssClass=""Css.Class.Head(HeadSize.H1)"">h1. Bootstrap headin</Paragraph>
<Paragraph CssClass=""Css.Class.Head(HeadSize.H2)"">h2. Bootstrap headin</Paragraph>
<Paragraph CssClass=""Css.Class.Head(HeadSize.H3)"">h3. Bootstrap headin</Paragraph>
<Paragraph CssClass=""Css.Class.Head(HeadSize.H4)"">h4. Bootstrap headin</Paragraph>
<Paragraph CssClass=""Css.Class.Head(HeadSize.H5)"">h5. Bootstrap headin</Paragraph>
<Paragraph CssClass=""Css.Class.Head(HeadSize.H6)"">h6. Bootstrap headin</Paragraph>
```
			")
		</Code>
	</Demo>
		<Demo Title="Display headings">
		<Description>
			Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a display heading—a larger, slightly more opinionated heading style.
		</Description>
		<Run>
			<Paragraph CssClass="Css.Class.Display(DisplaySize.One1)">Display 1</Paragraph>
			<Paragraph CssClass="Css.Class.Display(DisplaySize.Two2)">Display 2</Paragraph>
			<Paragraph CssClass="Css.Class.Display(DisplaySize.Three3)">Display 3</Paragraph>
			<Paragraph CssClass="Css.Class.Display(DisplaySize.Four4)">Display 4</Paragraph>
			<Paragraph CssClass="Css.Class.Display(DisplaySize.Five5)">Display 5</Paragraph>
			<Paragraph CssClass="Css.Class.Display(DisplaySize.Six6)">Display 6</Paragraph>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Paragraph CssClass=""Css.Class.Display(DisplaySize.One1)"">Display 1</Paragraph>
<Paragraph CssClass=""Css.Class.Display(DisplaySize.Two2)"">Display 2</Paragraph>
<Paragraph CssClass=""Css.Class.Display(DisplaySize.Three3)"">Display 3</Paragraph>
<Paragraph CssClass=""Css.Class.Display(DisplaySize.Four4)"">Display 4</Paragraph>
<Paragraph CssClass=""Css.Class.Display(DisplaySize.Five5)"">Display 5</Paragraph>
<Paragraph CssClass=""Css.Class.Display(DisplaySize.Six6)"">Display 6</Paragraph>
```
			")
		</Code>
	</Demo>
		<Demo Title="Lead">
		<Description>
			Make a paragraph stand out by adding <code>Lead()</code> .
		</Description>
		<Run>
			<Paragraph CssClass="Css.Class.Lead()">This is a lead paragraph. It stands out from regular paragraphs.</Paragraph>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Paragraph CssClass=""Css.Class.Lead()"">
	This is a lead paragraph. It stands out from regular paragraphs.
</Paragraph>
```
			")
		</Code>
	</Demo>
		<Demo Title="Blockquotes">
		<Description>
			For quoting blocks of content from another source within your document.
		</Description>
		<Run>
			<Blockquote>
				<p>A well-known quote, contained in a blockquote element.</p>
			</Blockquote>
			<br />
			<Figure>
				<Blockquote>
					<p>A well-known quote, contained in a blockquote element.</p>
				</Blockquote>
				<FigureCaption CssClass="Css.Class.BlockquoteFooter()">
					Someone famous in <cite title="Source Title">Source Title</cite>
				</FigureCaption>
			</Figure>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Blockquote>
	<p>A well-known quote, contained in a blockquote element.</p>
</Blockquote>
<br />
<Figure>
	<Blockquote>
		<p>A well-known quote, contained in a blockquote element.</p>
	</Blockquote>
	<FigureCaption CssClass=""Css.Class.BlockquoteFooter()"">
		Someone famous in <cite title=""Source Title"">Source Title</cite>
	</FigureCaption>
</Figure>
```
			")
		</Code>
	</Demo>
		<Demo Title="List inline">
		<Description>

		</Description>
		<Run>
			<ListInline>
				<ListInlineItem>This is a list item.</ListInlineItem>
				<ListInlineItem>And another one.</ListInlineItem>
				<ListInlineItem>But they're displayed inline.</ListInlineItem>
			</ListInline>
		</Run>
		<Code>
			@MD.Write(@"
```html
<ListInline>
	<ListInlineItem>This is a list item.</ListInlineItem>
	<ListInlineItem>And another one.</ListInlineItem>
	<ListInlineItem>But they're displayed inline.</ListInlineItem>
</ListInline>
```
			")
		</Code>
	</Demo>
</Pager>